<template>
	<view class="min-h-full p-8 static">
		<view class="flex flex-row flex-wrap rounded-lg bg-white" style="min-height: 80vh;">
			<view class="w-full p-22 text-14" style="color: #5E5E5E;">
				<view class="text-bold text-18 bottom-line pt-10 pb-15">
					<input class="w-full" type="text" placeholder="填写任务名称" v-model="name" placeholder-style="color:#B8B8B8" ></input>
				</view>
				<view class="bottom-line pt-12 pb-12 flex flex-row align-items-center">
					<text class="text-bold">订单类型：</text>
					<picker class="flex-1" @change="categoryChange" :value="category_index" :range="category_list" range-key="name">
						<text class="theme-color">{{category_list.length>0 ? category_list[category_index].name : ''}}</text>
					</picker>
				</view>
				<view class="bottom-line pt-12 pb-12 flex flex-row align-items-center">
					<text class="text-bold">订单时间：</text>
					<uni-datetime-picker class="flex-1" v-model="exec_at" hide-second>{{exec_at}}</uni-datetime-picker>
				</view>
				<view class="bottom-line pt-12 pb-12 flex flex-row ">
					<text class="text-bold" style="flex-shrink: 0;">订单地址：</text>
					<view class="flex-1 " style="overflow: hidden;">
						<uni-data-picker class="w-full" v-model="pca" :localdata="area_data" placeholder="请选择省市区" popup-title="请选择省市区" :clear-icon='false' :map="{text:'name',value:'id'}" @change="areaChange">
							<!-- #ifdef H5 -->
							<text v-if="province" class="text-14">{{province}} / {{city}} / {{area}}</text>
							<text v-else class="text-14" style="color: #808080;">请选择省市区</text>
							<!-- #endif -->
						</uni-data-picker> 
						<input class="flex-1 text-14 pt-10" type="text" placeholder="填写详细地址"  v-model="address"></input>
					</view>
				</view>
				<view class="bottom-line pt-12 pb-12">
					<view class="text-bold pb-5">订单描述：</view>
					<view style="line-height: 1.25rem;">
						<textarea class="text-14 w-full" style="height: 200rpx;" v-model="desc" placeholder="请填写任务描述" maxlength="300"></textarea>
					</view>
				</view>
				<view class="bottom-line pt-12 pb-12">  
					<view class="text-bold pb-5">订单要求：</view>
					<view style="line-height: 1.25rem;">
						<textarea class="text-14 w-full" style="min-height: 400rpx;" v-model="require" placeholder="请填写任务要求" maxlength="2000"></textarea>
					</view>
				</view>
				<view class="bottom-line pt-12 pb-12 flex flex-row align-items-center">
					<text class="text-bold">订单报酬：</text>
					<input class="flex-1 text-14" type="text" placeholder="请填写订单报酬"  v-model="money"></input>
				</view>
				<view class="bottom-line pt-12 pb-12 flex flex-row align-items-center">
					<text class="text-bold flex-shrink-0">审批文件：</text>
					<text v-if="file_name" class="flex-1 text-14 overflow-hidden" style="color: #5e5e5e" @tap="uploadFile">{{file_name}}</text>
					<text v-else class="flex-1 text-14" style="color: #808080" @tap="uploadFile">请上传审批文件</text>
				</view>
				
				<view class="text-center pb-10 pt-10" style="margin: auto;">
					<image v-if="!id || form_type=='copy'" class="" src="/static/publish-btn2.png" style="width: 385rpx; height:105rpx" @tap="addTask"></image> 
					<image v-else class="" src="/static/publish-btn2.png" style="width: 385rpx; height:105rpx" @tap="editTask"></image> 
				</view>
			</view> 
		</view>
	</view>
</template>

<script>
	import request from '/utils/request.js';
	import {getDateTime, uploadFile} from '/utils/util.js'
	export default {
		data() {
			return {
				form_type: '', // copy=复制编辑
				pca:'', //省市区最终选择
				area_data: [],
				id: '',
				category_list: [],
				category_index: 0,
				category_id: 0,
				exec_at: getDateTime(new Date(), true),
				name: '',
				desc: '',
				require: '',
				money: '',
				province: '',
				city: '',
				area: '',
				address: '',
				file_name: '',
				file_url: '',
			}
		},
		onLoad(options) {
			if(options.id && options.type == 'copy'){
				this.id = options.id;
				this.form_type = options.type;
				request.post('/merchant/taskDetail', {
					id: options.id
				}).then(res=>{
					this.category_id = res.category_id;
					this.exec_at = res.exec_at;
					this.name = res.name;
					this.desc = res.desc;
					this.require = res.require;
					this.money = res.money;
					this.province = res.province;
					this.city = res.city;
					this.area = res.area;
					this.address = res.address;
					this.file_name = '';
					this.file_url = '';
					// 请求完分类列表
					for(let i=0; i<this.category_list.length; i++){
						let cate = this.category_list[i];
						if(cate.id == this.category_id) {
							this.category_index = i;
							break;
						}
					}
				})
			}
			this.getCategoryList();
			this.getAllAreaList();
		},
		onShow() {
			
		},
		onReachBottom() {
			
		},
		methods: {
			// 选择订单分类
			categoryChange: function(e) {
				this.category_index = e.detail.value
				this.category_id = this.category_list[this.category_index].id
			},
			// 获取订单分类
			getCategoryList(){
				request.post('/task/categoryList').then(res=>{
					this.category_list = res;
					this.category_index = 0;
					this.category_id = this.category_list[this.category_index].id;
					// 如果存在id，查找下当前选择
					if(!this.id) return;
					if(this.category_id){
						for(let i=0; i<res.category_list.length; i++){
							let cate = res[i];
							if(cate.id == this.category_id) {
								this.category_index = i;
								break;
							}
						}
					}
				})
			},
			// 获取省市区数据
			getAllAreaList: function() {
				request.post('/common/allArea').then(res => {
					this.area_data = res;
					if(!this.id) return;
					// 如果存在id，查找下当前选择哪个省市区
					let province_len = res.length;
					for(let i=0; i<province_len; i++){
						let province = res[i];
						if(province.name != this.province) continue;
						// 查找城市
						let city_len = province.children.length;
						for(let j=0; j<city_len; j++){
							let city = province.children[j];
							if(city.name != this.city) continue;
							// 查找区县
							let area_len = city.children.length;
							for(let k=0; k<area_len; k++){
								let area = city.children[k];
								if(area.name == this.area) {
									this.pca = area.id
									break;
								} 
							}
							break;
						}
						break;
					}
					console.log('pca:',this.pca);
				})
			},
			// 地址选择
			areaChange(e){
				this.province = e.detail.value[0].text
				this.city = e.detail.value[1].text
				this.area = e.detail.value[2].text
			},
			// 上传文件
			uploadFile(){
				uploadFile({
					count: 1
				}).then(res=>{
					console.log(res)
					let file = res[0];
					this.file_name = file.filename
					this.file_url = file.url
				})
			},
			// 新增订单任务
			addTask(){
				request.post('merchant/addTask', {
					category_id: this.category_id,
					exec_at: this.exec_at,
					name: this.name,
					desc: this.desc,
					require: this.require,
					money: this.money,
					province: this.province,
					city: this.city,
					area: this.area,
					address: this.address,
					file: this.file_url,
				}).then(res=>{
					uni.showToast({
						title: '订单提交成功'
					})
					this.clearData();
					setTimeout(()=>{
						uni.navigateBack()
					}, 1000)
				})
			},
			// 修改订单任务
			editTask(){
				request.post('merchant/editTask', {
					id: this.id,
					category_id: this.category_id,
					exec_at: this.exec_at,
					name: this.name,
					desc: this.desc,
					require: this.require,
					money: this.money,
					province: this.province,
					city: this.city,
					area: this.area,
					address: this.address,
					file: this.file_url,
				}).then(res=>{
					uni.showToast({
						title: '订单提交成功'
					})
					setTimeout(()=>{
						uni.navigateBack()
					}, 1000)
				})
			},
			// 清空数据
			clearData(){
				this.category_id = this.category_list[this.category_index].id;
				this.exec_at = getDateTime(new Date(), true);
				this.name = '';
				this.desc = '';
				this.require = '';
				this.money = '';
				// this.province = '';
				// this.city = '';
				// this.area = '';
				this.address = '';
				this.file_name = '';
				this.file_url = '';
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #8BD1FF;
	}
	.bottom-line{
		border-bottom: 1px solid #bbb;
	}
	/* #ifdef MP-WEIXIN */
	.uni-data-tree .input-value{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 0px;
		padding-right: 5px;
		overflow: hidden;
		height: initial;
		box-sizing: border-box;
		border: none !important;
		border-radius: 0px;
		line-height: 1.25rem !important;
		font-size: 28rpx !important;
		flex-wrap: wrap !important;
		color: #B8B8B8;
	}
	.uni-data-tree .input-value .arrow-area{
		display: none;
	}
	.uni-data-tree .input-value .selected-area{
		font-size: 28rpx !important;
	}
	.uni-data-tree .input-value .selected-item{
		font-size: 28rpx !important;
	}
	/* #endif */
</style>
